<template>
  <view>
    <view
      class="question"
      v-for="(item, index) in list"
      :key="index"
      :style="{
        backgroundImage: 'url(' + url + item.image + ')',
        'background-repeat': 'no-repeat',
        'background-size': 'cover',
      }"
      @click="fn(index)"
    >
      <view class="text">{{ item.question }}</view>
    </view>
  </view>
</template>
<script>
export default {
  props: ["list"],
  data() {
    return {
      url: "https://st.h5120.com/upload/web/",
    };
  },
  methods: {
    fn(index) {
      this.debounce(this.navigate(index), 300);
    },
    navigate(index) {
      uni.navigateTo({
        url: `../answer/index?index=${index}`,
      });
    },
    debounce(func, wait) {
      let timer;
      return function () {
        let context = this; // 注意 this 指向
        let args = arguments; // arguments中存着e

        if (timer) clearTimeout(timer);

        timer = setTimeout(() => {
          func.apply(this, args);
        }, wait);
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.question {
  width: 96%;
  height: 200upx;
  margin-left: 2%;
  border-radius: 20upx;
  margin: 20upx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  .text {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
</style>